<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>在线情况</title>
    <link rel="stylesheet" href="/public/libs/layui/css/layui.css" media="all">
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="/public/libs/echarts/echarts.min.js"></script>
    <script src="/public/libs/jquery/jquery.min.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        .main-top {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: calc(50% - 30px);
            margin-top: 30px;
        }

        .main-bottom {
            width: calc(100% - 60px);
            height: calc(100% - 60px);
            margin: 30px;
        }
    </style>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div class="main-top">
        <div id="main-left-top" style="width: 45%; height:100%;"></div>
        <div id="main-right-top" style="width: 45%; height:100%;"></div>
    </div>
    <div class="main-bottom">
        <table class="layui-hide" id="device-table"></table>
    </div>
    <script src="/public/libs/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript">
        layui.use('table', function () {
            var table = layui.table;
            table.render({
                elem: '#device-table'
                , url: '/device/get_list'
                , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , cols: [[
                    { field: 'id', width: 80, title: 'ID', sort: true }
                    , { field: 'host', width: 300, title: 'IP地址', sort: true }
                    , { field: 'port', width: 80, title: '端口', sort: true }
                    , { field: 'method', width: 120, title: '登录方式', sort: true }
                    , { field: 'platform', width: 120, title: '所属平台', sort: true }
                    , { field: 'status', title: '状态', width: 80, sort: true }
                    , { field: 'author', title: '创建者', width: 150, sort: true }
                    , { field: 'create_time', title: '创建时间', width: 200, sort: true }
                    , { field: 'description', title: '备注'}
                ]]
            });
        });
        // 基于准备好的dom，初始化echarts实例
        var leftTopChart = echarts.init(document.getElementById('main-left-top'));
        var rightTopChart = echarts.init(document.getElementById('main-right-top'));
        $.get('/platform/get_list', function (res) {
            console.log('==>', res);
            let data = res.data;
            let platforms = [];
            for (let index in data) {
                let item = data[index];
                platforms.push(item);
            }
            leftTopChart.setOption({
                title: {
                    text: '在线情况',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'cross' }
                },
                legend: {},
                xAxis: [
                    {
                        type: 'category',
                        name: '平台',
                        axisTick: {
                            alignWithLabel: true
                        },
                        data: data.map(function (item) {
                            return item.platform;
                        }),
                        axisLabel: {
                            interval: 0,
                            rotate: 45
                        }
                    }
                ],
                yAxis: [
                    {
                        name: '台数',
                        type: 'value',
                        min: 0,
                        max: 12,
                        position: 'left',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }
                ],
                series: [{
                    data: data.map(function (item) {
                        return item.id;
                    }),
                    type: 'bar'
                }]
            });
        });
        rightTopChart.setOption({
            title: {
                text: '使用情况',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 1048, name: 'Search Engine' },
                        { value: 735, name: 'Direct' },
                        { value: 580, name: 'Email' },
                        { value: 484, name: 'Union Ads' },
                        { value: 300, name: 'Video Ads' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        });
    </script>
</body>

</html>